<template>
  <div class="form-item-el">
    <div v-if="mode === 'DESIGN'">
      <el-select class="max-fill" v-if="!$attrs.expanding" size="default" v-model="_value" disabled :placeholder="placeholder" />
      <el-radio-group v-model="_value" v-else>
        <el-radio style="margin: 5px" disabled v-for="(op, index) in options" :key="index" :label="op">{{ op }}</el-radio>
      </el-radio-group>
    </div>
    <div v-else-if="mode === 'PC' && !$attrs.readonly">
      <el-select
        class="max-fill"
        v-if="!$attrs.expanding"
        v-model="_value"
        size="default"
        clearable
        :disabled="$attrs.disabled"
        :placeholder="placeholder"
      >
        <el-option v-for="(op, index) in options" :key="index" :value="op" :label="op"></el-option>
      </el-select>
      <el-radio-group v-model="_value" v-else>
        <el-radio style="margin: 5px" v-for="(op, index) in options" :key="index" :label="op">{{ op }}</el-radio>
      </el-radio-group>
    </div>
    <div v-else>
      {{ _value }}
    </div>
  </div>
</template>

<script setup>
import { computed, ref, getCurrentInstance } from "vue";
import _ from "lodash";

const { proxy } = getCurrentInstance();
const props = defineProps({
  modelValue: {
    type: String,
    default: ""
  },
  placeholder: {
    type: String,
    default: "请输入内容"
  },
  expanding: {
    type: Boolean,
    default: false
  },
  options: {
    type: Array,
    default: () => []
  },
  mode: {
    type: String,
    default: "DESIGN"
  },
  required: {
    type: Boolean,
    default: false
  },
  readonly: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(["update:modelValue"]);

const _value = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit("update:modelValue", val);
  }
});

if (_.isEmpty(_value.value) && !proxy.$attrs.disabled) {
  _value.value = proxy.$attrs.defaultValue;
}

const showPicker = ref(false);

const onConfirm = val => {
  showPicker.value = false;
  _value.value = val;
};
</script>

<style scoped></style>
